<template>
    <div>
        <div class="center-bottom-content animate__animated animate__fadeInDown">
            <div class="bottom-content">
                <div class="bottom-item">
                    <div class="item" @click="nextRouyter('/operate/cockpit-clique')">
                        <img class="" src="@/assets/three/image/index/smartWater.svg" alt="">
                        <div class="label">生产运营</div>
                    </div>
                    <img class="item-img" src="@/assets/three/image/index/item-background.svg" alt="">
                </div>
                <div class="bottom-item">
                    <div class="item" @click="nextRouyter('/operate/configuration')">
                        <img class="" src="@/assets/three/image/index/optimization.svg" alt="">
                        <div class="label">工艺优化</div>
                    </div>
                    <img class="item-img" src="@/assets/three/image/index/item-background.svg" alt="">
                </div>
                <!-- <div class="bottom-item">
                    <div class="item" @click="nextRouyter('/park/equipment')">
                        <img class="" src="@/assets/three/image/index/equipment.svg" alt="">
                        <div class="label">设备管理</div>
                    </div>
                    <img class="item-img" src="@/assets/three/image/index/item-background.svg" alt="">
                </div> -->
                <div class="bottom-item">
                    <div class="item" @click="nextRouyter('/park/cockpit')">
                        <img class="" src="@/assets/three/image/index/park.svg" alt="">
                        <div class="label">园区管理</div>
                    </div>
                    <img class="item-img" src="@/assets/three/image/index/item-background.svg" alt="">
                </div>
                <div class="bottom-item">
                    <div class="item" @click="nextRouyter('/dispatch/dispatch-cockpit')">
                        <img class="" src="@/assets/three/image/index/pipelineNetwork.svg" alt="">
                        <div class="label">管网监测</div>
                    </div>
                    <img class="item-img" src="@/assets/three/image/index/item-background.svg" alt="">
                </div>
            </div>
        </div>
        <div class="plate" ref="plate">
            <!-- <header class="header">
                <div class="header-title">智慧水务平台</div>
                <img class="header-img" src="@/assets/three/image/header.png">
            </header> -->
            <ZdyHeader title="智慧水务平台" />
            <div class="center-top-content animate__animated animate__fadeInDown">
                <div class="content">
                    <div class="item">
                        <div class="">
                            <Statistic :value="indexStatistics.totalUsers"
                                :valueStyle="{ color: '#37dbed', fontSize: '26px' }" suffix="户"
                                :suffixStyle="{ fontSize: '26px', color: '#37dbed', fontWeight: 'bold' }"
                                :isToFixed="false" />
                            <div class="name">
                                当前总用户
                            </div>
                        </div>
                        <img class="item-img" src="@/assets/three/image/index/meter.svg" alt="">
                    </div>
                    <div class="item">
                        <div class="">
                            <Statistic :value="indexStatistics.annualWaterSupply"
                                :valueStyle="{ color: '#37dbed', fontSize: '26px' }" suffix="万m³"
                                :suffixStyle="{ fontSize: '26px', color: '#37dbed', fontWeight: 'bold' }" />

                            <div class="name">
                                年总供水量
                            </div>
                        </div>
                        <img class="item-img" src="@/assets/three/image/index/meter.svg" alt="">

                    </div>
                    <div class="item">
                        <div class="">
                            <Statistic :value="indexStatistics.annualWaterIntake"
                                :valueStyle="{ color: '#37dbed', fontSize: '26px' }" suffix="万m³"
                                :suffixStyle="{ fontSize: '26px', color: '#37dbed', fontWeight: 'bold' }" />

                            <div class="name">
                                年总取水量
                            </div>
                        </div>
                        <img class="item-img" src="@/assets/three/image/index/meter.svg" alt="">
                    </div>
                </div>
            </div>

            <div class="left-content animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card  left-card-1">
                        <img class="background" src="@/assets/three/image/index/left-card-1-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">出厂水质检测</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="detection">
                            <div class="info">
                                <div class="msg">
                                    <Statistic :value="factoryWaterQualityStatistics.dailyWaterSupply"
                                        :valueStyle="{ color: '#36dbec', fontSize: '22px' }" suffix="m³"
                                        :suffixStyle="{ fontSize: '16px' }" />
                                </div>
                                <div class="name">今日供水量</div>
                            </div>
                            <div class="info">
                                <div class="msg">
                                    <Statistic :value="factoryWaterQualityStatistics.dailyPowerConsumption"
                                        :valueStyle="{ color: '#ff852b', fontSize: '22px' }" suffix="KW.h"
                                        :suffixStyle="{ fontSize: '16px' }" />
                                </div>
                                <div class="name">今日耗电量</div>
                            </div>
                            <div class="info">
                                <div class="msg">
                                    <Statistic :value="factoryWaterQualityStatistics.productionFlowRate"
                                        :valueStyle="{ color: '#1ed841', fontSize: '22px' }" suffix="m³/h"
                                        :suffixStyle="{ fontSize: '16px' }" />
                                </div>
                                <div class="name">出厂流量</div>
                            </div>
                            <div class="info">
                                <div class="msg">
                                    <Statistic :value="factoryWaterQualityStatistics.productionPressure"
                                        :valueStyle="{ color: '#1ed841', fontSize: '22px' }" suffix="KPa"
                                        :suffixStyle="{ fontSize: '16px' }" />
                                </div>
                                <div class="name">出厂压力</div>
                            </div>
                        </div>
                    </div>
                    <div class="card  left-card-2">
                        <img class="background" src="@/assets/three/image/index/left-card-2-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">本月统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="statistics">
                            <div class="parameter-group">
                                <div class="parameter-name">进水浊度</div>
                                <Statistic :value="monthStatistics.influentTurbidity"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>

                            <div class="parameter-group">
                                <div class="parameter-name">出水浊度</div>
                                <Statistic :value="monthStatistics.effluentTurbidity"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>

                            <div class="parameter-group">
                                <div class="parameter-name">进水电导</div>
                                <Statistic :value="monthStatistics.influentConductivity"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">出水电导</div>
                                <Statistic :value="monthStatistics.effluentConductivity"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">进水温度</div>
                                <Statistic :value="monthStatistics.influentTemperature"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="℃"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>

                            <div class="parameter-group">
                                <div class="parameter-name">出水温度</div>
                                <Statistic :value="monthStatistics.effluentTemperature"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="℃"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>

                            <div class="parameter-group">
                                <div class="parameter-name">进水PH</div>
                                <Statistic :value="monthStatistics.influentPH"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="PH"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>

                            <div class="parameter-group">
                                <div class="parameter-name">出水余氯</div>
                                <Statistic :value="monthStatistics.effluentResidualChlorine"
                                    :valueStyle="{ color: '#37dbed', fontSize: '16px' }" suffix="mg/L"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">工单统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="orderStatistics">
                            <div class="stats-content">
                                <div class="stat-item">
                                    <Statistic :value="workOrderStatistics.reportedToday"
                                        :valueStyle="{ color: '#37dbed', fontSize: '26px' }" />
                                    <div class="stat-label">今日上报</div>
                                </div>
                                <div class="stat-item">
                                    <Statistic :value="workOrderStatistics.completedToday"
                                        :valueStyle="{ color: '#1ed841', fontSize: '26px' }" />
                                    <div class="stat-label">今日完成</div>
                                </div>
                                <div class="stat-item circularProgress">
                                    <CircularProgress :progress="workOrderStatistics.completionRate" />
                                    <div class="stat-label circularProgress-label">完成率</div>
                                </div>
                                <div class="stat-item circularProgress">
                                    <CircularProgress :progress="workOrderStatistics.delayRate" progressColor="#43cfcb"
                                        textColor="#43cfcb" />
                                    <div class="stat-label circularProgress-label">延期率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/index/right-card-1-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">DMA产销差排名</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="ranking">
                            <div class="data-item" v-for="(item, index) in dmaProductionDifferenceRanking" :key="index">
                                <div :class="['rank', 'rank-' + (index + 1)]">{{ index + 1 }}</div>
                                <div class="right-item">
                                    <div class="info">
                                        <div class="name">{{ item.dmaAreaName }}</div>
                                        <div class="value">{{ item.differenceValue }}</div>
                                        <div class="percentage" v-if="item.differenceRate">
                                            <Statistic :value="item.differenceRate"
                                                :valueStyle="{ color: '#37dbed', fontSize: '18px' }" suffix="%"
                                                :suffixStyle="{ fontSize: '18px', color: '#37dbed', fontWeight: 'bold' }" />
                                        </div>
                                    </div>
                                    <div class="demo-progress">
                                        <el-progress :percentage="item.differenceRate" :show-text="false" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card eCharts-card right-card-2">
                        <img class="background" src="@/assets/three/image/index/right-card-2-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备状态</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="eChartsOptins" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import CircularProgress from '@/components/CircularProgress';
import 'animate.css/animate.min.css';
import { onMounted, defineEmits } from 'vue';
import { ref } from 'vue';
import { getFactoryWaterQualityStatistics, getMonthStatistics, getDeviceStatusStatistics, getDmaProductionDifferenceRanking, getIndexStatistics, getWorkOrderStatistics } from '@/api/index';
import ZdyHeader from '@/components/ZdyHeader';
const emit = defineEmits(['nextRouyter']);

const plate = ref(null);
const factoryWaterQualityStatistics = ref({});
const indexStatistics = ref({});
const monthStatistics = ref({});
const workOrderStatistics = ref({});
const dmaProductionDifferenceRanking = ref({});

const eChartsOptins = {
    title: {
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: 'center',
        itemWidth: 16,
        itemHeight: 10,
        itemGap: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['故障', '正常', '维修']
    },
    series: [
        {
            name: '设备状态',
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 6, name: '故障' },
                { value: 32, name: '正常' },
                { value: 4, name: '维修' }
            ],
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = ['#FFA022', '#00B050', '#FF0000'];
                        return colorList[params.dataIndex];
                    }
                }
            }
        }
    ]
};
const nextRouyter = (path) => {
    emit("nextRouyter", path);
}

onMounted(() => {
    getFactoryWaterQualityStatistics().then(res => {
        factoryWaterQualityStatistics.value = res.data;
    });
    getIndexStatistics().then(res => {
        indexStatistics.value = res.data;
    });
    getMonthStatistics().then(res => {
        monthStatistics.value = res.data;
    });
    getWorkOrderStatistics().then(res => {
        workOrderStatistics.value = res.data;
    });
    getDmaProductionDifferenceRanking().then(res => {
        dmaProductionDifferenceRanking.value = res.data;
    });
})
</script>

<style lang="scss" scoped>
@import "@/assets/styles/three-home.scss";

:deep(.el-progress-bar__outer) {
    height: 4px !important;
}

.left-card-1 {
    height: 280px;
}

.left-card-2 {
    height: 580px;
}

.right-card-1 {
    height: 360px !important;
}

.right-card-2 {
    height: 500px !important;

    :deep(.chart-container) {
        height: 300px !important;
        padding-right: 40px;
    }
}

.detection {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 190px;

    .info {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;

        .msg {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 6px;
        }

        .msg span:nth-child(1) {
            margin-right: 5px;
        }

        .msg span:nth-child(2) {
            font-size: 16px;
        }

        .name {
            font-size: 14px;
        }
    }
}

.statistics {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;

    .parameter-group {
        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .parameter-name {
            font-size: 14px;
            color: #fff;
            margin-bottom: 6px;
        }

        .parameter-value {
            color: #37dbed;
            font-size: 18px;
            font-weight: bold;
        }
    }
}

.orderStatistics {
    width: 100%;
    height: 210px;

    .stats-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .stat-item {
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .circularProgress {}

    .stat-value {
        font-size: 26px;
        font-weight: bold;
    }

    .circularProgress-label {}

    .stat-label {
        font-size: 14px;
        margin-top: 10px;
        color: #fff;
    }
}

.ranking {
    .data-item {
        box-sizing: border-box;
        padding: 5px 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .right-item {
            display: flex;
            width: 100%;
            align-items: center;
            flex-direction: column;
            margin: 2px 0;

            .info {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #fff;
                margin-bottom: 6px;

                .name {
                    font-size: 14px;
                }

                .value {
                    font-size: 14px;
                }

                .percentage {
                    font-size: 18px;
                    font-weight: bold;
                    color: #4de4ff;
                }
            }

            .demo-progress {
                width: 100%;
            }
        }
    }

    .rank {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .rank-1 {
        border: 1px solid #ed7035;
        color: #fff;
        background: rgba(#ed7035, 0.6);
        font-size: 16px;
    }

    .rank-2 {
        border: 1px solid #c59e11;
        color: #fff;
        background: rgba(#c59e11, 0.6);
        font-size: 16px;
    }

    .rank-3 {
        border: 1px solid #29c8c1;
        color: #fff;
        background: rgba(#29c8c1, 0.6);
        font-size: 16px;
    }

    .rank-4 {
        border: 1px solid #1E90FF;
        color: #fff;
        background: rgba(#1E90FF, 0.6);
        font-size: 16px;
    }

    .rank-5 {
        border: 1px solid #9370DB;
        color: #fff;
        background: rgba(#9370DB, 0.6);
        font-size: 16px;
    }
}

.center-top-content {
    width: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    z-index: 9899;

    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            width: 200px;
            height: 200px;
            cursor: pointer;

            >div {
                position: absolute;
            }

            .name {
                color: #fff;
                font-size: 16px;
                margin-top: 5px;
                text-align: center;
            }

            .item-img {
                width: 200px;
                height: 200px;
            }
        }
    }
}

.eCharts {
    margin-top: 20px;
    margin-right: 20px;
    .chart-container {
        height: 209px !important;
        width: 209px !important;
    }
}

.center-bottom-content {
    height: 106px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .bottom-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .bottom-item {
        width: 100%;
        height: 106px;
        position: relative;

        .item-img {
            height: 106px;
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 0;
        }

        .item {
            height: 106px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .label {
                margin-top: 4px;
                color: #fff;
                font-size: 14px;
            }

            >img {
                width: 30.29px;
                height: 30.29px;
            }
        }
    }
}
</style>